<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分段下载</title>
    <script src="ROOT_PATH/static/js/jquery-3.5.1.min.js"></script>
    <script src="ROOT_PATH/static/js/vue.min.js"></script>
</head>
<body>

</body>
</html>

<script>
    async function downloadFile(url, fileName) {
        const CHUNK_SIZE = 1024 * 1024 * 10 // 每次下载10MB
        const response = await fetch(url)
        const contentRange = response.headers.get('content-range')

        const fileSize = response.headers.get('content-length')
        const fileStream = []
        let offset = 0
        console.log(fileSize, 'contentRange');
        while (offset < fileSize) {
            const end = Math.min(offset + CHUNK_SIZE, fileSize)
            const options = {
                headers: { 'Range': `bytes=${offset}-${end - 1}` }
            }
            console.log('start', offset, end);
            const blob = await fetch(url, options).then(res => res.blob())
            fileStream.push(blob)
            offset = end
        }

        const blob = new Blob(fileStream, { type: response.headers.get('content-type') })
        //saveAs(blob, fileName)
    }
    var url = 'http://xiaofeizhu.com/learn/download/download';
    downloadFile(url,'test.zip');
</script>